<template>
	<view v-if="itemData.data.productList && itemData.data.productList.length > 0" class="drag optional" :style="{
      background: itemData.style.bgcolor,
      paddingLeft: itemData.style.paddingLeft * 2 + 'rpx',
      paddingRight: itemData.style.paddingLeft * 2 + 'rpx',
      paddingTop: itemData.style.paddingTop * 2 + 'rpx',
      paddingBottom: itemData.style.paddingBottom * 2 + 'rpx',
    }">
		<view :style="{
        background: itemData.style.background,
        borderTopLeftRadius: itemData.style.topRadio * 2 + 'rpx',
        borderTopRightRadius: itemData.style.topRadio * 2 + 'rpx',
        borderBottomLeftRadius: itemData.style.bottomRadio * 2 + 'rpx',
        borderBottomRightRadius: itemData.style.bottomRadio * 2 + 'rpx',
      }" class="diy-sharpproduct">
			<view class="sharpproduct-head d-b-c" :style="{
          backgroundImage: itemData.style.bgimage
            ? 'url(' + itemData.style.bgimage + ')'
            : '',
        }">
				<view class="left d-s-c">
					<view v-if="itemData.style.titleType == 1" class="name">{{
            itemData.params.title
          }}</view>
					<image v-if="itemData.style.titleType == 2" class="titleImg" :src="itemData.style.titleImage"
						mode="heightFix"></image>
				</view>
				<view class="right white d-c-c" @click="gotoList" style="line-height: 1; height: 100%" :style="{
            color: itemData.style.moreColor,
            fontSize: itemData.style.moreSize * 2 + 'rpx',
          }">
					{{ itemData.params.more }}
					<text class="icon iconfont icon-you" :style="{
              color: itemData.style.moreColor,
              fontSize: '22rpx',
            }"></text>
				</view>
			</view>
			<view class="product-list assemble column__3 d-s-c">
				<view @click="gotoDetail(item)" class="product-item" :style="{
            background: itemData.style.productBgColor,
            borderTopLeftRadius: itemData.style.productTopRadio * 2 + 'rpx',
            borderTopRightRadius: itemData.style.productTopRadio * 2 + 'rpx',
            borderBottomLeftRadius:
              itemData.style.productBottomRadio * 2 + 'rpx',
            borderBottomRightRadius:
              itemData.style.productBottomRadio * 2 + 'rpx',
          }" v-for="(item, index) in itemData.data.productList" :key="index">
					<view class="product-cover">
						<image :style="{
                borderRadius: itemData.style.productImgRadio * 2 + 'rpx',
              }" :src="item.filePath" mode="aspectFit"></image>
						<view class="desc-situation product-sale" v-if="itemData.style.productNumberbtn == 1" :style="{
                backgroundImage:
                  'linear-gradient(to right, ' +
                  (itemData.style.titleColor1 || '#fff') +
                  ', ' +
                  (itemData.style.titleColor2 || '#fff') +
                  ')',
              }">
							<text :style="{
                  color: itemData.style.numberColor,
                }" class="">{{ item.assembleNum }}人团</text>
						</view>
					</view>
					<view class="d-c d-c-c">
						<view class="f24 tc text-ellipsis" :style="{
                color: itemData.style.productNameColor,
              }" v-if="itemData.style.productName == 1">
							{{ item.productName }}
						</view>
						<view class="mb10" :style="{
                color: itemData.style.productPriceColor,
              }" v-if="itemData.style.productPrice == 1">
							<text class="f24">¥</text>
							<text class="f28 fb">{{ item.assemblePrice }}</text>
						</view>
						<view :style="{
                color: itemData.style.productLineColor,
              }" v-if="itemData.style.productLineprice == 1" class="text-d-line-through gray9 f24 mb10">
							¥{{ item.productPrice }}
						</view>
						<view :style="{
                background: itemData.style.productLineBtnBackground,
                borderRadius: itemData.style.productLineBtnRadius + 'px',
                color: itemData.style.productLineBtnColor,
              }" class="assemble_btns text-ellipsis tc" v-if="itemData.style.productBtn == 1">
							{{ itemData.params.btntext }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {};
		},
		props: ["itemData"],
		created() {
			console.log(this.$props.itemData);
		},
		methods: {
			scroll(e) {},

			/*跳转列表*/
			gotoList() {
				let url = "/pagesPlus/assemble/list/list";
				this.gotoPage(url);
			},

			/*跳转产品详情*/
			gotoDetail(e) {
				let url =
					"/pagesPlus/assemble/detail/detail?assembleProductId=" +
					e.assembleProductId;
				this.gotoPage(url);
			},
		},
	};
</script>

<style lang="scss">
	.diy-sharpproduct {
		overflow: hidden;
	}

	.diy-sharpproduct .product-list.assemble {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		background-color: #ffffff;
		overflow-x: auto;
		padding-left: 20rpx;
		padding-top: 20rpx;
	}

	.diy-sharpproduct .product-list.assemble .product-title {
		margin-bottom: 36rpx;
	}

	.diy-sharpproduct .product-list.assemble .price {
		margin: 0 auto;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
		width: 100%;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		text-align: center;
	}

	.diy-sharpproduct .display__list .column__3 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.diy-sharpproduct .product-list.assemble.column__3 {
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.diy-sharpproduct .product-list.assemble.column__3 .product-item {
		width: 198rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		background: #ffffff;
		flex-shrink: 0;
		margin-right: 28rpx;
		background: #fff;
		// padding: 15px;
		box-sizing: border-box;
	}

	.diy-sharpproduct .product-list.assemble.column__3 .product-item .product-cover {
		width: 198rpx;
		height: 198rpx;
		overflow: hidden;
		position: relative;
	}

	.diy-sharpproduct .product-list.assemble.column__3 .product-item .product-cover image {
		width: 198rpx;
		height: 198rpx;
	}

	.diy-sharpproduct .product-list.assemble.column__3 .product-item .product-cover .desc-situation {
		position: absolute;
		top: 12rpx;
		left: 0px;
		background: linear-gradient(60deg, #fc4528 0%, #fc573c 43%, #fc7639 100%);
		color: #ffffff !important;
		padding: 0 24rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 1;
		border-bottom-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
	}

	.diy-sharpproduct .product-list.assemble.column__3 .product-title {
		margin-bottom: 16rpx;
	}

	.sharpproduct-head {
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		margin: 0;
		padding: 0 20rpx;
		background-repeat: no-repeat;
		background-size: cover;
		line-height: 1;
	}

	.sharpproduct-head .name.assemble_name {
		font-size: 36rpx;
		font-weight: bold;
		width: 200rpx;
	}

	.sharpproduct-head .datetime {
		margin-left: 40rpx;
	}

	.sharpproduct-head .datetime>span {
		display: inline-block;
	}

	.sharpproduct-head .datetime .text {
		padding: 0 4rpx;
	}

	.sharpproduct-head .datetime .box {
		padding: 4rpx;
		background: #000000;
		color: #ffffff;
	}

	.diy-sharpproduct .product-list.assemble .assemble_btns {
		font-size: 20rpx;
		text-align: center;
		width: 126rpx;
		height: 40rpx;
		line-height: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.titleImg {
		width: 100%;
		height: 88rpx;
	}
</style>